<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
 <c:if test="${listed==null }">
 <jsp:forward page="sidepageServlet"></jsp:forward>
 </c:if>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>		

 	li{
	    list-style: none;
	}
	a{
	    text-decoration: none;
	}
	header{
		margin-top: 10px;
		height: 30px;
		padding:5px;
	    background: linear-gradient(gainsboro,ghostwhite);
	    overflow: hidden;
	}
	header span{
	    color: dimgray;
	    position: absolute;
	    left: 50px;
	    padding-top: 6px;
	    font-size: 12px;
	    font-weight: lighter;
	}
	.顶部导航 .注册{
	    color: red;
	}
	.顶部导航 li{
	    display: inline-block;
	    font-size: 12px;
	    font-weight: lighter;
	    color:dimgray;
	    margin: 0px 5px;
	    vertical-align: top;
	}
	.顶部导航{
	    float: right;
	    position: absolute;
	    right: 60px;
	    margin: 6px;
	    overflow: hidden;
	}
	.顶部导航 li a{
	    color: dimgray;
	}
	.菜单导航 li{
	    display: inline-block;
	    margin: 10px;
	    font-size: 20px;
	}
	.顶部导航 a:hover{
	    color: red;
	}
	header div{
	    width: 130px;
	    border: 1px solid lightgray;
	    position: relative;
	    top: 30px;
	    left: -40px;
	    background-color: white;
	    display: none;
	
	}
	header div p{
	    text-align: center;
	}
	header div p a{
	    color: gray;
	    font-weight: lighter;
	    font-size: 10px;
	}
	.顶部导航 li:nth-child(4){
	    width: 70px;
	}
	.顶部导航 li:nth-child(4):hover div{
	    display: block;
	}
	.搜索 .loginlogo{
	    position: relative;
	    top: 50px;
	    left: 50px;
	}
	.搜索 form{
	    width: 600px;
	    margin: 0px auto;
	    position: relative;
	    top: -20px;
	}
	.搜索 form input:nth-child(1){
	    width: 400px;
	    height: 40px;
	    border: 2px solid #ff3c3c;
	    text-indent: 1em;
	}
	.搜索 form input:nth-child(2){
	    width: 90px;
	    height: 40px;
	    background-color: #ff3c3c;
	    border: 2px solid #ff3c3c;
	    margin-left: -5px;
	    vertical-align: top;
	    color: white;
	    font-weight: bolder;
	    font-size: 17px;
	}
	.搜索 form ul{
	    margin-left: -40px;
	    margin-top: 0px;
	}
	.搜索 form ul li{
	    display: inline-block;
	    padding-right: 10px;
	}
	.搜索 form ul li a{
	    font-size: 13px;
	    color: #57565f;
	}
	.搜索 span{
	    padding: 10px 20px;
	    border: 1px solid gainsboro;
	    position: relative;
	    left: 1350px;
	    top: -80px;
	    background-color:ghostwhite;
	}
	.搜索 span a{
	    color: #57565f;
	    margin-left: 20px;
	
	}
	.分类{
	    border-bottom: 3px solid orangered;
	    margin-top: -30px;
	    margin-left: 20px;
	    margin-right: 20px;
	}
	h3{
	    width: 200px;
	    padding: 10px 15px;
	    text-indent: 1em;
	    background-color: red;
	    color: white;
	    float: left;
	    overflow: hidden;
	    position: relative;
	    top: 0px;
	}
	.分类 img{
	    position: absolute;
	    right: 50px;
	    top: 180px;
	}
	.分类 nav{
	    position: relative;
	    top: 15px;
	}
	.菜单导航 a{
	    color: black;
	    font-weight: bolder;
	}
	.菜单导航 .hong{
	    color: red;
	}
	.商品 {
		height: 500px;
	}
	.商品 img:nth-child(1){
		position: relative;
		width: 400px;
		height: 400px;
		left:-220px;
	}
	
	.简介{
		position: relative;
		width: 400px;
		height: 400px;
		left:500px;
		top:-400px;
	}
	#myimg{
		position: relative;
		width: 180px;
		height: 50px;
		left:100px;
		top:30px;
	}
	.同类商品{
		position: relative;
		width: 400px;
		height: 400px;
		left:1100px;
		top:-700px;
	}
	.商品 p{
		position: relative;
		height: 5px;
		background-color: red;
		top:-650px;
	}
	taqble td{
		width: 300px;
		height: 50px;
	}
	#nb8{
		position: relative;
		left:300px;
	}
	#nb8 ul{
	    display: inline-block;
	    margin: 50px;
	}
	#nb8 ul li:nth-child(1){
	    text-align: center;
	}
	#nb8 ul li:nth-child(2){
	    text-align: center;
	    font-weight: bolder;
	    font-size: 20px;
	}
	#nb8 ul li:nth-child(3){
	    font-weight: lighter;
	    color: gray;
	}
	#nb8 img{
	    transition: all 3s ease-in-out;
	}
	#nb8 img:hover{
	    transform: rotate(360deg);
	}
	#nb9{
	    border-bottom: 1px solid gray;
	    position:relative;
	    left: 300px;
	
	}
	#nb9 dl{
	    display: inline-block;
	    width: 150px;
	    height: 200px;
	    vertical-align: top;
	    margin-left: 10px;
	}
	#nb9 dl dt {
	    text-indent: 2.5em;
	    margin-bottom: 20px;
	    font-weight: bolder;
	}
	#nb9 dl dt a{
	    color: black;
	}
	#nb9 dl dt a:hover{
	    text-decoration:underline;
	}
	#nb9 dl dd a{
	    font-weight: lighter;
	    font-size: 13px;
	    line-height: 30px;
	    color: black;
	}
	#nb9 dl dd a:hover{
	    color: red;
	}
	#nb9 .las{
	    position: relative;
	    left: 850px;
	    top: -230px;
	}
	#nb9  .las img:nth-child(1){
	    float: left;
	    margin-right: 20px;
	}
	#nb9  .las ul li{
	    line-height: 30px;
	}
	#nb9 .las ul a{
	    color: gray;
	    margin-left: -10px;
	}
	#nb9 .las ul a:hover{
	    color: red;
	}
	#nb9 .las ul li:nth-child(2){
	    position: relative;
	    top: 10px;
	}
	#nb9 .las ul li:nth-child(3){
	    font-size: 13px;
	    position: relative;
	    top: 15px;
	}
	#nb9 .las ul li:nth-child(4){
	    font-size: 25px;
	    color: red;
	}
	footer{
		position: relative;
	    top: -100px;
	    left:250px;
	}
	#sb p {
	    font-size: 12px;
	    text-align: center;
	}
	#sb ul{
	    margin-left: 100px;
	}
	#sb ul li{
	    display: inline-block;
	}
	#sb ul li img{
	    width: 98px;
	    height: 33px;
	    border: 1px solid gainsboro;
	    border-radius: 8px;
	    position: relative;
	    left: 100px;
	}
	#sb{
	    width: 1200px;
	    height: 40px;
	}
</style>
<body>
	<header>
		<span>送货至：四川成都</span>
		<ul class="顶部导航">
		    <li>你好! 请<a href="login.jsp">登录 </a><a href="register.jsp" class="注册">免费注册</a>|</li>
		    <li><a href="#">我的订单</a> </li>
		    <li><a href="#">收藏夹 </a><img src="images/t_arrow.gif"> |</li>
		    <li><a href="text.jsp">客户服务</a><img src="images/t_arrow.gif">
		        <div>
		            <p><a href="text.jsp">客服服务</a></p>
		            <p><a href="text.jsp">客服服务</a></p>
		            <p><a href="text.jsp">客服服务</a></p>
		        </div></li>
		    <li><a href="#">| 网站导航</a><img src="images/t_arrow.gif">|</li>
		    <li>关注我们：<a href="#"><img src="images/sh1.png"></a> <a href="#"><img src="images/sh2.png"></a> |</li>
		    <li><a href="#"> 手机版</a> <img src="images/s_tel.png"> </li>
		</ul>
	</header>
		<section>
		    <div class="搜索">
		    <img class="loginlogo" src="images/logo.png">
		        <form method="get" action="#">
		            <a href="搜索页面.html" target="_blank" style="border: none">
		                <input  type="search" placeholder="请输入关键字">
		            <input  type= submit value="搜索" ></a>
		            <ul>
		                <li><a href= "搜索页面.html" target="_blank">咖啡</a> </li>
		                <li><a href="搜索页面.html" target="_blank"> iphone 6S</a> </li>
		                <li><a href="搜索页面.html" target="_blank">新鲜美食</a> </li>
		                <li><a href="搜索页面.html" target="_blank">蛋糕</a> </li>
		                <li><a href="搜索页面.html" target="_blank">日用品</a> </li>
		                <li><a href="搜索页面.html" target="_blank">连衣裙</a> </li>
		            </ul>
		        </form>
		        <span>
		        <img src="images/car.png"><a href="#">购物车</a>
		    	</span>
		    </div>
		     <div class="分类">
		        <h3>全部商品分类</h3>
		        <nav>
		            <ul class="菜单导航">
		                <li ><a href="index.jsp" class="hong">首页</a></li>
		                <li ><a href="#" class="hong">自营超市</a></li>
		                <li><a href="#">叮咚团购</a></li>
		                <li><a href="#">叮咚超市</a></li>
		                <li><a href="#">女装</a></li>
		                <li><a href="#">美妆</a></li>
		                <li><a href="#">叮咚海购</a></li>
		                <li><a href="#">团购</a></li>
		            </ul>
		        </nav>
		        <img src="images/phone.png">
		    </div>
		</section>
		<div  class="商品">
		  
			<img src="images/${newlisted.get(0).getsUrl()}">
			<span class="简介">
				<h1>简介</h1>
			
			 <h4 id="cName">商品名称:${newlisted.get(0).getsName()}</h4>
				<h4 id="cPrice">本店价格￥:${newlisted.get(0).getsPrice()}：<a></a></h4>
			
				<input type="text" value="1">
				<a href="scarServlet?cId=${newlisted.get(0).getsId()}&cUrl=${newlisted.get(0).getsUrl()}&cName=${newlisted.get(0).getsName()}&cPrice=${newlisted.get(0).getsPrice()}"><img src="images/j_car.png" id="myimg"></a> 
			</span>
		
			
		</div>
			<div id="nb8">
		        <ul>
		            <li><img src="images/${listed.get(0).imgUrl}"></li>
		            <li>${listed.get(0).imgName}</li>
		            <li>${listed.get(0).imgPosition}</li>
		        </ul>
		        <ul>
		            <li><img src="images/${listed.get(1).imgUrl}"></li>
		            <li>${listed.get(1).imgName}</li>
		            <li>${listed.get(1).imgPosition}</li>
		        </ul>
		        <ul>
		            <li><img src="images/${listed.get(2).imgUrl}"></li>
		            <li>${listed.get(2).imgName}</li>
		            <li>${listed.get(2).imgPosition}</li>
		        </ul>
		        <ul>
		            <li><img src="images/${listed.get(3).imgUrl}"></li>
		            <li>${listed.get(3).imgName}</li>
		            <li>${listed.get(3).imgPosition}</li>
		        </ul>
		    </div>
		    <div id="nb9">
		    <dl>
            <dt><a href="#">新手上路</a></dt>
            <dd><a href="#">售后流程</a></dd>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">订购方式</a></dd>
            <dd><a href="#">隐私声明</a></dd>
            <dd><a href="#">推荐分享说明</a></dd>
        </dl>
		        <dl>
            <dt><a href="#">${newlist.get(0).qName}</a></dt>
            <dd><a href="#">${newlist.get(0).qPosition}</a></dd>
            <dd><a href="#">${newlist.get(0).qUrl}</a></dd>
            <dd><a href="#">${newlist.get(0).quse}</</a></dd>
        </dl>
        <dl>
            <dt><a href="#">${newlist.get(1).qName}</a></dt>
            <dd><a href="#">${newlist.get(1).qPosition}</a></dd>
            <dd><a href="#">${newlist.get(1).qUrl}</</a></dd>
            <dd><a href="#">${newlist.get(1).quse}</</a></dd>
        </dl>
        <dl>
            <dt><a href="#">${newlist.get(2).qName}</a></dt>
            <dd><a href="#">${newlist.get(2).qPosition}</a></dd>
            <dd><a href="#">${newlist.get(2).qUrl}</</a></dd>
            <dd><a href="#">${newlist.get(2).quse}</</a></dd>
        </dl>
        <dl>
            <dt><a href="#">${newlist.get(3).qName}</a></dt>
            <dd><a href="#">${newlist.get(3).qPosition}</a></dd>
            <dd><a href="#">${newlist.get(3).qUrl}</</a></dd>
            <dd><a href="#">${newlist.get(3).quse}</</a></dd>
        </dl>
		        <div class="las">
		            <img src="images/er.gif" >
		            <ul>
		                <li><img src="images/sh1.png"><a href="#">新浪微博</a> </li>
		                <li><img src="images/b_sh_2.png"><a href="#">腾讯微博</a> </li>
		                <li><p>服务热线：</p></li>
		                <li><span>400-123-4567</span></li>
		            </ul>
		 
		 
		            <img src="images/ss.png">
		        </div>
		    </div>
		<footer>
		    <div id="sb">
		       <p>川ICP备133880号|合字A1.A2-20230003|营业执照</p>
<p>Coperight&copy;叮咚易购2020-2024,All Right Reserved</p>  <br/>
		        <ul>
		            <li><img src="images/b_1.gif"></li>
		            <li><img src="images/b_2.gif"></li>
		            <li><img src="images/b_3.gif"></li>
		            <li><img src="images/b_4.gif"></li>
		            <li><img src="images/b_5.gif"></li>
		            <li><img src="images/b_6.gif"></li>
		        </ul>
		    </div>
		</footer>
</body>
</html>